<template>
    <view class="container">
      <view class="title">考试成绩</view>
      
      <view v-if="!hasApprovedEnrollment" class="tip-card card">
        <text>您还没有通过的报名申请，无法查看考试成绩</text>
        <button class="btn-primary" size="mini" @click="navigateTo('/pages/enrollment/apply/apply')">立即报名</button>
      </view>
      
      <block v-else>
        <view class="filter-tabs">
          <view 
            class="filter-tab" 
            :class="{ active: activeTab === 'all' }" 
            @click="activeTab = 'all'"
          >
            全部
          </view>
          <view 
            class="filter-tab" 
            :class="{ active: activeTab === 'passed' }" 
            @click="activeTab = 'passed'"
          >
            已通过
          </view>
          <view 
            class="filter-tab" 
            :class="{ active: activeTab === 'failed' }" 
            @click="activeTab = 'failed'"
          >
            未通过
          </view>
        </view>
        
        <view class="progress-card card">
          <view class="progress-title">考试进度</view>
          <view class="subject-list">
            <view 
              class="subject-item" 
              v-for="(subject, key) in subjects" 
              :key="key"
              @click="filterBySubject(key)"
            >
              <view class="subject-icon" :class="{ active: passedSubjects[key] }">
                {{ subject.icon }}
              </view>
              <view class="subject-info">
                <view class="subject-name">{{ subject.name }}</view>
                <view class="subject-status" :class="{ passed: passedSubjects[key] }">
                  {{ passedSubjects[key] ? '已通过' : '未通过' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="results-list">
          <view v-if="filteredResults.length === 0" class="empty-tip">
            暂无考试成绩记录
          </view>
          
          <view 
            class="result-item card" 
            v-for="(item, index) in filteredResults" 
            :key="index"
          >
            <view class="result-header">
              <view class="result-title">{{ item.exam ? item.exam.name : '' }}</view>
              <view class="result-pass" :class="{ passed: item.is_passed }">
                {{ item.is_passed ? '通过' : '未通过' }}
              </view>
            </view>
            
            <view class="result-info">
              <text class="result-type">{{ getExamTypeText(item.exam ? item.exam.exam_type : '') }}</text>
              <text class="result-date">考试时间：{{ formatDate(item.exam ? item.exam.exam_date : '') }}</text>
            </view>
            
            <view class="result-detail">
              <view class="result-score">
                <text class="score-label">得分：</text>
                <text class="score-value" :class="{ 'score-pass': item.is_passed, 'score-fail': !item.is_passed }">
                  {{ item.score }}
                </text>
              </view>
              <text class="result-standard">及格线：{{ getPassScore(item.exam ? item.exam.exam_type : '') }}</text>
            </view>
            
            <view class="result-feedback" v-if="item.feedback">
              <text class="feedback-label">考官评语：</text>
              <text class="feedback-content">{{ item.feedback }}</text>
            </view>
          </view>
        </view>
        
        <view class="action-container" v-if="filteredResults.length > 0">
          <button 
            class="btn-primary" 
            @click="navigateTo('/pages/exam/registration/registration')"
          >
            报名考试
          </button>
        </view>
      </block>
    </view>
  </template>
  
  <script>
  import { mapActions, mapGetters } from 'vuex';
  import { formatDate } from '@/utils/date';
  import config from '@/config/index';
  
  export default {
    data() {
      return {
        activeTab: 'all',
        activeSubject: '',
        subjects: {
          subject1: { name: '科目一', icon: '一' },
          subject2: { name: '科目二', icon: '二' },
          subject3: { name: '科目三', icon: '三' },
          subject4: { name: '科目四', icon: '四' }
        }
      };
    },
    computed: {
      ...mapGetters('enrollment', [
        'approvedEnrollments'
      ]),
      ...mapGetters('exam', [
        'examResults',
        'passedSubjects'
      ]),
      hasApprovedEnrollment() {
        return this.approvedEnrollments && this.approvedEnrollments.length > 0;
      },
      filteredResults() {
        let result = [...this.examResults];
        
        // 标签筛选
        if (this.activeTab === 'passed') {
          result = result.filter(item => item.is_passed);
        } else if (this.activeTab === 'failed') {
          result = result.filter(item => !item.is_passed);
        }
        
        // 科目筛选
        if (this.activeSubject) {
          result = result.filter(item => item.exam && item.exam.exam_type === this.activeSubject);
        }
        
        // 按考试时间降序排序
        result.sort((a, b) => {
          if (!a.exam || !b.exam) return 0;
          return new Date(b.exam.exam_date) - new Date(a.exam.exam_date);
        });
        
        return result;
      }
    },
    onLoad() {
      // 获取考试成绩
      this.getMyExamResults();
    },
    methods: {
      ...mapActions('exam', [
        'getMyExamResults'
      ]),
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      formatDate(date) {
        return formatDate(date, 'YYYY-MM-DD HH:mm');
      },
      getExamTypeText(type) {
        const examType = config.examSubjects.find(item => item.value === type);
        return examType ? examType.label : type;
      },
      getPassScore(type) {
        const passScores = {
          'subject1': 90,
          'subject2': 80,
          'subject3': 80,
          'subject4': 90
        };
        return passScores[type] || 60;
      },
      filterBySubject(subject) {
        if (this.activeSubject === subject) {
          this.activeSubject = '';
        } else {
          this.activeSubject = subject;
        }
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 30rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .tip-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .filter-tabs {
    display: flex;
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .filter-tab {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
  }
  
  .filter-tab.active {
    color: #fff;
    background-color: #3c8dbc;
  }
  
  .progress-card {
    margin-bottom: 30rpx;
    padding: 30rpx;
  }
  
  .progress-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    text-align: center;
  }
  
  .subject-list {
    display: flex;
    justify-content: space-between;
  }
  
  .subject-item {
    width: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .subject-icon {
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #999;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  
  .subject-icon.active {
    background-color: #3c8dbc;
    color: #fff;
  }
  
  .subject-info {
    text-align: center;
  }
  
  .subject-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 6rpx;
  }
  
  .subject-status {
    font-size: 24rpx;
    color: #999;
  }
  
  .subject-status.passed {
    color: #52c41a;
  }
  
  .results-list {
    margin-bottom: 40rpx;
  }
  
  .empty-tip {
    text-align: center;
    padding: 60rpx 0;
    color: #999;
  }
  
  .result-item {
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .result-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  
  .result-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .result-pass {
    font-size: 28rpx;
    color: #f56c6c;
  }
  
  .result-pass.passed {
    color: #52c41a;
  }
  
  .result-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.result-type {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.result-date {
  font-size: 26rpx;
  color: #999;
}

.result-detail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.result-score {
  display: flex;
  align-items: center;
}

.score-label {
  font-size: 28rpx;
  color: #666;
}

.score-value {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 10rpx;
}

.score-pass {
  color: #52c41a;
}

.score-fail {
  color: #f56c6c;
}

.result-standard {
  font-size: 26rpx;
  color: #999;
  line-height: 36rpx;
}

.result-feedback {
  padding-top: 20rpx;
  border-top: 1px solid #eee;
}

.feedback-label {
  font-size: 28rpx;
  color: #666;
}

.feedback-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.action-container {
  margin-top: 60rpx;
}

.btn-primary {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #3c8dbc;
  border-radius: 8rpx;
}
</style>